<template>
  <div id="main" :style="{width: '800px', height: '600px'}"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "GaugeRedis",
  data(){
    return{
    }
  },
  mounted() {

    const chartDom = document.getElementById('main');
    const used_memory_dataset_perc = 0.06;
    const option = {
      series: [
        {
          type: 'gauge',
          center: ['50%', '60%'],
          startAngle: 200,
          endAngle: -20,
          min: 0,
          max: 60,
          splitNumber: 12,
          itemStyle: {
            color: '#FFAB91'
          },
          progress: {
            show: true,
            width: 30
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              width: 30
            }
          },
          axisTick: {
            distance: -45,
            splitNumber: 5,
            lineStyle: {
              width: 2,
              color: '#999'
            }
          },
          splitLine: {
            distance: -52,
            length: 14,
            lineStyle: {
              width: 3,
              color: '#999'
            }
          },
          axisLabel: {
            distance: -20,
            color: '#999',
            fontSize: 20
          },
          anchor: {
            show: false
          },
          title: {
            show: false
          },
          detail: {
            valueAnimation: true,
            width: '60%',
            lineHeight: 40,
            borderRadius: 8,
            offsetCenter: [0, '-15%'],
            fontSize: 35,
            fontWeight: 'bolder',
            formatter: '内存占比'+used_memory_dataset_perc*10+'%',
            color: 'inherit'
          },
          data: [
            {
              value: used_memory_dataset_perc * 60,
            }
          ]
        }
      ]
    };
    const myChart = echarts.init(chartDom);
    setInterval(function () {
      myChart.setOption({
        series: [
          {
            data: [
              {
                value: used_memory_dataset_perc*60
              }
            ]
          },
        ]
      });
    }, 2000);
    option && myChart.setOption(option);
  },

}
</script>

<style scoped>

</style>